<template>
  <div class="goods-list-item">
    <img :src="goodsItem.show.img" alt="">
    <div class="goods-info">
      <div class="goods-title">{{goodsItem.title}}</div>
      <div class="goods-desc">
        <span class="goods-price">{{goodsItem.price}}</span>
        <span class="goods-cfav">
            <img src="~assets/img/common/collect.svg" alt="">{{goodsItem.cfav}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "GoodsListItem",
    data() {
      return {}
    },
    props: {
      goodsItem: {
        type: Object,
        default() {
          return {}
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .goods-list-item {
    /*width: 50%;*/
    /*text-align: center;*/
    margin-bottom: 10px;
    width: 48%;

    img {
      width: 100%;
    }
    .goods-info {
      .goods-title {
        /*单行溢出*/
        /*overflow: hidden;*/
        /*text-overflow: ellipsis;*/
        /*white-space: nowrap;*/

        // 多行溢出
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 14px;
      }
      .goods-desc {
        display: flex;
        justify-content: center;
        .goods-price {
          color: var(--color-high-text)
        }
        .goods-cfav {
          img {
            width: 14px;
          }
        }
      }
    }
  }
</style>
